import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal, message, Button, Spin } from "antd";
import { toJS } from "mobx";
import { WeaLocaleProvider, WeaSearchInput, WeaReqTop, WeaRightMenu, WeaTab, WeaSelect, WeaTableEdit, WeaNewScroll, WeaDialog, WeaBrowser, WeaFormItem, WeaSearchGroup, WeaAlertPage } from 'ecCom';
import { WeaTableNew } from "comsMobx";
import { Condition } from '../list/listCondition';
import { Collapse } from 'antd';
import ComposEdit from './composEdit';
import { ShareDialog } from '../dialog/ShareDialog';
import { Text } from '../util/text';
const text = new Text();
const Panel = Collapse.Panel;

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject("composingStore")
@observer
class Composting extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            //type: ""
        }
    }

    componentDidMount() {
        const { composingStore } = this.props;
        const { ids, id, type, by, j_type, isSpecialReport, isQuickSift } = this.props.location.query;
        composingStore.initList({ ids: ids, id: id, type: type, by: by, j_type: j_type, isSpecialReport: isSpecialReport, isQuickSift: isQuickSift });
    }

    getTopButtons = () => {
        const { composingStore } = this.props;
        let btns = [];
        btns.push(
            composingStore.getTopButton()
        )
        return btns;
    }
    //保存编辑的上报信息
    savaForm = () => {
        const { composingStore } = this.props;
        composingStore.saveForm();
    }

    onChange = datas => {
        const { composingStore } = this.props;
        composingStore.datas = datas;
    }

    onRowSelect = (sRowKeys, rows, dataIndex, selectedDatas) => {
        const { composingStore } = this.props;
        composingStore.selectedRowKeys = sRowKeys;
    }

    doEdit = (type) => {
        const { composingStore } = this.props;
        //this.setState({ type: type });
        // composingStore.selectedRowKeys.map((record, index) => {
        //     ids.push(composingStore.datas[index].id);
        // });
        // composingStore.initEditDialog({ ids: ids });
        composingStore.initEditDialog({ j_type: composingStore.j_type });
        composingStore.setState({ visible: true });
    }

    //批量修改栏目
    batchChangeColumn = (record, index) => {
        const { composingStore } = this.props;
        //根据selectedRowkeys进行修改
        composingStore.selectedRowKeys.map((m, i) => {
            composingStore.datas[m].j_column = record.id;
            // if (this.state.type === "onEdit") {
            //     composingStore._datas[m].j_column = record.id;
            // } else {
            //     composingStore.datas[m].j_column = record.id;
            // }
        });
        composingStore.setState({ visible: false });
    }
    search = (v) => {
        const { composingStore } = this.props;
        composingStore.initEditDialog({ search: v, j_type: composingStore.j_type });
    }

    addInfoSifting = (record) => {
        const { composingStore } = this.props;
        record.datas.map(c => {
            composingStore.datas.push({
                id: c.id,
                j_column: c.j_column,
                reportorg: c.reportorgspan,
                title: c.title
            });
        });
    }

    changeTab(key) {
        const { composingStore } = this.props;
        composingStore.changeTab(key);
    }

    onCancel = () => {
        const { composingStore } = this.props;
        composingStore.hideObject = false;
        if(composingStore.selectTabKey == 'edition'){
            composingStore.showOffice();
        }
        composingStore.setState({ upVisible: false });
    }
    //快捷筛选 追加
    add = () => {
        const { composingStore } = this.props;
        composingStore.add();
    }
    //快捷筛选重新生成期刊
    reload = () => {
        const { composingStore } = this.props;
        composingStore.reload();
        // const { setState } = composingStore;
        // composingStore.src = "/spa/info/infoedition/office.html?mTemplate=" + composingStore.doctemplate + "&mFileType=.doc&mEditType=1&mFileName=" + composingStore.title1 + "&reload=1";
        // document.getElementById("hideIframe").src = composingStore.src;
        // composingStore.isReload = true;
        // composingStore.hideObject = false;
        // setState({ sureVisible: false })
    }
    //快捷筛选--忽略
    ignore = () => {
        const { composingStore } = this.props;
        composingStore.ignore();

        // const { setState } = composingStore;
        // composingStore.updateJournalDeatil();
        // composingStore.hideObject = false;
        // setState({ sureVisible: false })
    }
    //快捷筛选提示condition
    getCondition = () => {
        let group = [];
        let items = [];
        items.push({
            com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cv3plu@append`}
                label={'1.追加：将快捷筛选的上报信息追加到当前期刊中'}
                labelCol={{ span: 18 }}
                colon={false}
            >
            </WeaFormItem>),
            col: 1,
        });
        items.push({
            com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5ag0pc@renew`}
                label={'2.重新生成：根据模板重新生成期刊'}
                labelCol={{ span: 18 }}
                colon={false}
            >
            </WeaFormItem>),
            col: 1,
        });
        items.push({
            com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sihqgc@ignore`}
                label={'3.忽略：忽略快捷筛选的信息'}
                labelCol={{ span: 18 }}
                colon={false}
            >
            </WeaFormItem>),
            col: 1,
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@mdh5zi@SearchGroup`} needTigger={true} title='' showGroup={true} items={items} />);
        return <div>{group}</div>;
    }
    render() {
        const { composingStore } = this.props;
        const { loadingSpin, isRight } = composingStore;
        if (loadingSpin) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@m4n1bc`} size="large" /></div>
        }
        if (!isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@uly8sg`}><div>{getLabel(382663, '暂无权限')}</div></WeaAlertPage>
        }
        const { tabs, selectTabKey, tableStore, selectedRowKeys, form, responseData, title1, title2, status: { loading, visible, upVisible, sureVisible }, columns, datas, buttonVisible, canDraggle, selectKey, selectChange, setState, editTableStore, checkPeriods, upForm, upCondition } = composingStore;
        const { getHistoricalPeriodsList, periodsTableStore, shareListTableStore } = composingStore;
        const { doctemplate, docid, docstatus, columnData, siftData, src, showEdit, hideObject, showEdition } = composingStore;
        const options = composingStore.getOptions();
        const rightMenu = composingStore.getRightMenu();
        //const tabs = [{ key: "composing", title: getLabel(388766, "排版") },{ key: "chengwen", title: getLabel(388766, "成文") }];
        const props = {
            type: 'primary',
        }
        let ids = [];       //遍历可编辑列表得到所有的id
        datas.map(m => {
            ids.push(m.id);
        });
        let btns = new Array();
        //浏览按钮以Button形式展示，button禁用后，IE浏览器中点击按钮还存在浏览按钮的点击事件，禁用冒泡。此处渲染不同的button
        if (buttonVisible) {
            btns.push(
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e7bk97@ADD`} type="primary" disabled={buttonVisible}>{text.ADD}</Button>
            );
        } else {
            btns.push(
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@6ydhb9@WeaBrowser`}
                    ref="infoBrowser"
                    icon="icon-coms-government"
                    iconBgcolor='#f14a2d'
                    title={text.EDITINFO}
                    type={'infoSifting'}
                    isSingle={false}
                    customized
                    dataParams={{ ids: ids, j_type: composingStore.j_type, journalId: composingStore.journalId }}
                    conditionDataParams={{ j_type: composingStore.j_type }}
                    buttons={
                        [
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eh0qb0@addInfoSifting`} onClick={() => { this.addInfoSifting(this.refs.infoBrowser.get()); this.refs.infoBrowser.closeModal() }}>{text.SURE}</Button>,
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bxgzlc@CANCEL`} onClick={() => this.refs.infoBrowser.closeModal()}>{text.CANCEL}</Button>
                        ]
                    }
                >
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wqbh6l@ADD`} type="primary" disabled={buttonVisible}>{text.ADD}</Button>
                </WeaBrowser>
            );
        }
        //btns.push(<Button {...props} onClick={() => composingStore.tableEdit.refs.edit.doAdd() } type="primary" disabled={buttonVisible}>追加</Button>);
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zxbbgg@doDelete`} {...props} onClick={() => composingStore.tableEdit.refs.edit.doDelete()} type="primary" disabled={buttonVisible || selectedRowKeys.length === 0}>{text.DELETE}</Button>);
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@evg4ma@doEdit`} {...props} onClick={this.doEdit} type="primary" disabled={buttonVisible || selectedRowKeys.length === 0}>{text.UPDATE}</Button>);

        const dialogBtns = [
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sunca4@SEARCH`} type='primary'>{text.SEARCH}</Button>,
        ];

        //谷歌浏览器需要将 iframe 隐藏插件需要将高度置为1px 并且执行window.hideIframe.hideIwebOffice();//隐藏插件 显示则与之相反
        let iframestyle =  (!!window.ActiveXObject || "ActiveXObject" in window) ?
        { display: (selectTabKey == "composing" || selectTabKey == "shareList" || hideObject) ? "none" : "", width: '80%', backgroundColor: '#fff', margin: '30px 10% 0 10%' }
        :
        { height: (selectTabKey == "composing" || selectTabKey == "shareList" || hideObject) ? "1px" : "100%", width: '80%', backgroundColor: '#fff', margin: '30px 10% 0 10%' }
        
          return (
            <div>
                <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@epd8zq`}
                    title={docstatus > 0 ? title1 : text.COMPOSING}
                    icon={<i className='icon-coms-government' />}
                    iconBgcolor='#f14a2d'
                    buttons={this.getTopButtons()}
                    showDropIcon={true}
                    tabDatas={tabs}
                    selectedKey={selectTabKey}
                    onChange={this.changeTab.bind(this)}
                >
                    {selectTabKey == "composing" &&
                        <div>
                            <div className='info-compos-top'>
                                <span className='info-compos-title'>{title1}</span>
                                <div style={{ float: 'right', marginTop: '9px', marginRight: '20px' }}>
                                    <span >{text.CHOOSESUBCOLUMN}</span>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ko5x9h`}
                                        options={options}
                                        style={{ width: '100px' }}
                                        value={selectKey}
                                        onChange={selectChange}
                                    />
                                </div>
                            </div>
                            <div className='info-compos-container'>
                                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@u8vxjl`} buttons={btns} />
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@2s90wg`} height='300px'>
                                    <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@lrfhov`}
                                        ref={el => { composingStore.tableEdit = el }}
                                        showTitle={false}
                                        columns={toJS(columns)}
                                        datas={toJS(datas)}
                                        draggable={canDraggle}
                                        showAdd={false}
                                        showCopy={false}
                                        showDelete={false}
                                        onChange={this.onChange}
                                        onRowSelect={this.onRowSelect}
                                        selectedRowKeys={selectedRowKeys}
                                        tableProps={
                                            {
                                                onRowClick: (record, index) => { composingStore.getForm({ reqSiftId: record.id }) },
                                                rowClassName: (record, index) => selectKey == 'all' || record.j_column == selectKey ? '' : 'info-table-tr'

                                            }
                                        }

                                    />
                                </WeaNewScroll>
                            </div>
                            <div className='info-compos-top'>
                                <span className='info-compos-title'>{title2}</span>
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sr57g1`} style={{ float: 'right', margin: '9px' }} onClick={() => { this.savaForm() }} type="primary" disabled={buttonVisible}>保存</Button>
                            </div>
                            <div className='info-compos-container'>
                                <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@o2subu`} form={form} condition={responseData.condition}></Condition>
                            </div>
                            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cd0ztc`}
                                title={text.CHOOSECOLUMN}
                                visible={visible}
                                style={{ width: 500, height: 300 }}
                                onCancel={() => setState({ visible: false })}
                                buttons={[
                                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hyduj7@CANCEL`} type="ghost" onClick={() => setState({ visible: false })}>{text.CANCEL}</Button>)
                                ]}
                            >
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@a74m0t`} height='100%'>
                                    <div>
                                        <div style={{ width: '350px', margin: '30px auto' }}>
                                            <WeaSearchInput ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchInput@7g0gv9`}
                                                onSearch={v => this.search(v)}
                                                searchFunc={(v) => this.search(v)}
                                            />
                                        </div>
                                        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@6oi9ss`} comsWeaTableStore={editTableStore}
                                            onRowClick={(record, index) => { this.batchChangeColumn(record, index) }}
                                            className="wea-info-table"
                                            needScroll={true}
                                        />
                                    </div>
                                </WeaNewScroll>
                            </WeaDialog>


                        </div>
                    }
                    {showEdition && <div style={iframestyle}>
                        <iframe
                            id="hideIframe"
                            width='100%'
                            height={(selectTabKey == "composing" || selectTabKey == "shareList" || hideObject) ? '1px' : '850px'}
                            frameborder="no"
                            border="0"
                            name="hideIframe"
                            src={src}
                        /></div>}
                    {selectTabKey == 'shareList' &&
                        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@d7e2km`} datas={rightMenu}>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ens1tv`} comsWeaTableStore={shareListTableStore} needScroll={true} />
                        </WeaRightMenu>
                    }
                    <ComposEdit ecId={`${this && this.props && this.props.ecId || ''}_ComposEdit@gigthi`}
                        composingStore={composingStore}
                    />
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@850k10`}
                        icon="icon-coms-government"
                        iconBgcolor='#f14a2d'
                        title={text.UPDATEPERIODS}
                        visible={upVisible}
                        style={{ width: 500, height: 500 }}
                        onCancel={this.onCancel}
                        buttons={[(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vyc1wr@checkPeriods`} type="primary" onClick={checkPeriods}>{text.SURE}</Button>),
                        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3f6ts6@onCancel`} type="ghost" onClick={this.onCancel}>取消</Button>)
                        ]}
                    >
                        <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@bugh6i`} form={upForm} condition={upCondition} col="1"></Condition>
                        <Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@bg07uj`} onChange={getHistoricalPeriodsList} style={{ backgroundColor: '#fff', border: 'none' }}>
                            <Panel ecId={`${this && this.props && this.props.ecId || ''}_Panel@30zm4b`} header={text.SHOWPERIODS} key="1" className='show_history_periods'>
                                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@2wz80c`} comsWeaTableStore={periodsTableStore}
                                    className="wea-info-table"
                                    scroll={{ y: '300px' }}
                                    size="small"
                                />
                            </Panel>
                        </Collapse>
                    </WeaDialog>
                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@lklbhn`}
                        title={'信息确认'}
                        icon="icon-coms-government"
                        iconBgcolor='#f14a2d'
                        visible={sureVisible}
                        style={{ width: 500, height: 300 }}
                        onCancel={() => setState({ sureVisible: false })}
                        buttons={[
                            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@aotfxw@add}`} type="ghost" onClick={this.add}>追加</Button>),
                            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b22ljn@reload`} type="ghost" onClick={this.reload}>重新生成</Button>),
                            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zg8di7@ignore`} type="ghost" onClick={this.ignore}>忽略</Button>),
                        ]}
                    >
                        {this.getCondition()}
                    </WeaDialog>
                    <ShareDialog ecId={`${this && this.props && this.props.ecId || ''}_ShareDialog@0bbyas`} store={composingStore} pathId={composingStore.pathId} />
                </WeaReqTop>
            </div>
        )
    }

}

export default Composting;